<template>
    <el-pagination
      @current-change="currentChange"
      @size-change="sizeChange"
      layout="prev, pager, next"
      :page-size="1"
      :total="selectData.count"
    />
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'
import { Data } from "../type/pagination";
export default defineComponent({
    props: {
      total: {
        type: Number,
        default:2
      }
    },
    setup (props, context) {
      
      const data = reactive(new Data());
    

    watch(() => props.total, (newVal, oldVal) => {
      data.selectData.count = newVal
   })

    const currentChange = (page: number) => {
      context.emit('change-page', page)
    };

    const sizeChange = (pageSize: number) => {
      context.emit('change-pageSize', pageSize)
    };

    return {...toRefs(data), currentChange, sizeChange}
    }
})
</script>

<style scoped>
</style>